import React, { useState, useEffect } from 'react';
import { Drawer, Form, Input, Button, Select, Radio, message } from 'antd';
import { getDeptsAPI, updateUserAPI } from '../../apis/user/userAPI';

const { Option } = Select;

export default function updateProfile(props) {
  const user = props.userInfo.user;
  const [dept, setDept] = useState([]);
  useEffect(() => {
    getDept();
    // console.log(user);
  }, []);
  const getDept = async () => {
    const res = await getDeptsAPI();
    setDept(res.data.rows.children);
    // console.log('dept',res);
  };
  const updateUser = async (data) => {
    const res = await updateUserAPI(data);
    if (res.status == 200) {
      message.success('修改成功');
      props.onClose();
    }
    // console.log(res);
  };
  const onFinish = (values) => {
    const username = user.username;
    const status = user.status;
    const roleId = user.roleId;
    const userId = user.userId;
    // console.log('Success:', values);
    // console.log({...values,username,status,roleId,userId});
    updateUser({ ...values, username, status, roleId, userId });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <Drawer
      title="编辑资料"
      placement="right"
      closable={false}
      width={600}
      onClose={props.onClose}
      visible={props.visible}
    >
      <Form
        name="basic"
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 20,
        }}
        initialValues={{
          email: user.email,
          mobile: user.mobile,
          // deptId:user.deptName,
          ssex: user.ssex,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item label="邮箱" name="email">
          <Input />
        </Form.Item>

        <Form.Item label="手机" name="mobile">
          <Input />
        </Form.Item>
        <Form.Item label="部门" name="deptId">
          <Select defaultValue={user.deptName}>
            {dept.map((i) => {
              return <Option value={i.id}>{i.title}</Option>;
            })}
          </Select>
        </Form.Item>
        <Form.Item label="性别" name="ssex">
          <Radio.Group>
            <Radio value="0">男</Radio>
            <Radio value="1">女</Radio>
            <Radio value="2">保密</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="描述" name="description">
          <Input.TextArea showCount maxLength={100} />
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button style={{ marginLeft: '10px' }} onClick={props.onClose}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </Drawer>
  );
}
